<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>hooks - 肉蛋葱鸡肉粥🍛的博客☕</title><meta name="Description" content=""><meta property="og:title" content="hooks" />
<meta property="og:description" content="useState 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React, { useState } from &#39;react&#39;; function Example() { // 声明一个叫 &#34;count&#34; 的 state 变量 const [count, setCount] = useState(0); return ( &lt;div&gt; &lt;p&gt;You clicked {count} times&lt;/p&gt; &lt;button onClick={() =&gt; setCount(count &#43; 1)}&gt; Click me &lt;/button&gt; &lt;/div&gt; ); } useEffect 1 2 3 4 5 6 7 8" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://example.org/posts/reacthooks/" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-08-27T10:45:53+08:00" />
<meta property="article:modified_time" content="2021-08-27T10:45:53+08:00" /><meta property="og:site_name" content="肉蛋葱鸡肉粥🍛的博客☕" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="hooks"/>
<meta name="twitter:description" content="useState 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React, { useState } from &#39;react&#39;; function Example() { // 声明一个叫 &#34;count&#34; 的 state 变量 const [count, setCount] = useState(0); return ( &lt;div&gt; &lt;p&gt;You clicked {count} times&lt;/p&gt; &lt;button onClick={() =&gt; setCount(count &#43; 1)}&gt; Click me &lt;/button&gt; &lt;/div&gt; ); } useEffect 1 2 3 4 5 6 7 8"/>
<meta name="application-name" content="肉蛋葱鸡肉粥🍛的博客☕">
<meta name="apple-mobile-web-app-title" content="肉蛋葱鸡肉粥🍛的博客☕"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="http://example.org/posts/reacthooks/" /><link rel="prev" href="http://example.org/posts/react&#43;ts/" /><link rel="next" href="http://example.org/posts/react%E6%89%A9%E5%B1%95/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "hooks",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "http:\/\/example.org\/posts\/reacthooks\/"
        },"genre": "posts","keywords": "reactHooks","wordcount":  1554 ,
        "url": "http:\/\/example.org\/posts\/reacthooks\/","datePublished": "2021-08-27T10:45:53+08:00","dateModified": "2021-08-27T10:45:53+08:00","publisher": {
            "@type": "Organization",
            "name": "yzuxqz"},"author": {
                "@type": "Person",
                "name": "yzuxqz"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 文章 </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><a class="menu-item" href="/about/"> 关于 </a><span class="menu-item delimiter"></span><a href="javascript:void(0);" class="menu-item language" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                        <select class="language-select" id="language-select-desktop" onchange="location = this.value;"><option value="/posts/reacthooks/" selected>简体中文</option></select>
                    </a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><a class="menu-item" href="/posts/" title="">文章</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><a class="menu-item" href="/about/" title="">关于</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a><a href="javascript:void(0);" class="menu-item" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                    <select class="language-select" onchange="location = this.value;"><option value="/posts/reacthooks/" selected>简体中文</option></select>
                </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">hooks</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://github.com/yzuxqz" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>yzuxqz</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/react/"><i class="far fa-folder fa-fw"></i>react</a>&nbsp;<a href="/categories/%E5%89%8D%E7%AB%AF/"><i class="far fa-folder fa-fw"></i>前端</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-08-27">2021-08-27</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 1554 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 4 分钟&nbsp;</div>
        </div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#usestate">useState</a></li>
    <li><a href="#useeffect">useEffect</a></li>
    <li><a href="#usecontext">useContext</a></li>
    <li><a href="#memo">memo</a></li>
    <li><a href="#usememo">useMemo</a></li>
    <li><a href="#usecallback">useCallback</a></li>
    <li><a href="#usereducer">useReducer</a></li>
    <li><a href="#useref">useRef</a></li>
    <li><a href="#usedispatch">useDispatch</a></li>
    <li><a href="#useselector">useSelector</a></li>
    <li><a href="#自定义hooks">自定义hooks</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><h2 id="usestate">useState</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">Example</span><span class="p">()</span> <span class="p">{</span>
  <span class="c1">// 声明一个叫 &#34;count&#34; 的 state 变量
</span><span class="c1"></span>  <span class="kr">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>

  <span class="k">return</span> <span class="p">(</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">You</span> <span class="nx">clicked</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="nx">times</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=&gt;</span> <span class="nx">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)}&gt;</span>
        <span class="nx">Click</span> <span class="nx">me</span>
      <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
  <span class="p">);</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="useeffect">useEffect</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useEffect</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">Example</span><span class="p">()</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>

  
  <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span> <span class="sb">`You clicked </span><span class="si">${</span><span class="nx">count</span><span class="si">}</span><span class="sb"> times`</span><span class="p">;</span>
  <span class="p">});</span>

  <span class="k">return</span> <span class="p">(</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">You</span> <span class="nx">clicked</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="nx">times</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=&gt;</span> <span class="nx">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)}&gt;</span>
        <span class="nx">Click</span> <span class="nx">me</span>
      <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
  <span class="p">);</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>useEffect如果第二个参数不写，相当于class中的componentDidMounted和componentDidUpdate</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx">  <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span> <span class="sb">`You clicked </span><span class="si">${</span><span class="nx">count</span><span class="si">}</span><span class="sb"> times`</span><span class="p">;</span>
  <span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>返回一个函数，相当于componentWillUnMounted</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx">  <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">count</span><span class="p">)</span>
    <span class="k">return</span> <span class="p">()=&gt;{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;离开&#39;</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>第二个参数表示要根据哪些状态的改变而去重新渲染，如果为空数组，则无论什么状态改变都不会调用effect</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx">  <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">count</span><span class="p">)</span>
    <span class="k">return</span> <span class="p">()=&gt;{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;离开&#39;</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">}</span><span class="err">，</span><span class="p">[])</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>数组中有哪些值，就会随着这些状态的改变而重新执行副作用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx">  <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">count</span><span class="p">)</span>
    <span class="k">return</span> <span class="p">()=&gt;{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;离开&#39;</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">},[</span><span class="nx">count</span><span class="p">])</span><span class="c1">//只有count变化了才会调用effect中的函数
</span></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h2 id="usecontext">useContext</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span> <span class="p">,{</span><span class="nx">useState</span><span class="p">,</span><span class="nx">createContext</span><span class="p">,</span><span class="nx">useContext</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span>
<span class="kr">const</span> <span class="nx">CountContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">({})</span><span class="c1">//1
</span><span class="c1"></span><span class="kd">function</span> <span class="nx">Counter</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="o">=</span> <span class="nx">useContext</span><span class="p">(</span><span class="nx">CountContext</span><span class="p">)</span><span class="c1">//3
</span><span class="c1"></span>  <span class="k">return</span> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;{</span><span class="nx">count</span><span class="p">}&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">Context</span><span class="p">()</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span><span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
  <span class="k">return</span><span class="p">(</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;{</span><span class="nx">count</span><span class="p">}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{()=&gt;{</span><span class="nx">setCount</span><span class="p">(</span><span class="nx">count</span><span class="o">+</span><span class="mi">1</span><span class="p">)}}&gt;</span><span class="nx">点击</span>	<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">CountContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{</span><span class="nx">count</span><span class="p">}&gt;</span><span class="c1">//2如果初始值为对象，这里要写成对象的形式
</span><span class="c1"></span>        <span class="p">&lt;</span><span class="nt">Counter</span><span class="p">/&gt;</span>
      <span class="p">&lt;/</span><span class="nt">CountContext.Provider</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
  <span class="p">)</span>
<span class="p">}</span>
<span class="kr">export</span>  <span class="k">default</span> <span class="nx">Context</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>父组件创建context</p>
</li>
<li>
<p>在父组件中包裹子组件</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx">      <span class="p">&lt;</span><span class="nt">CountContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{</span><span class="nx">count</span><span class="p">}&gt;</span>
        <span class="p">&lt;</span><span class="nt">Counter</span><span class="p">/&gt;</span>
      <span class="p">&lt;/</span><span class="nt">CountContext.Provider</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>子组件中使用useContext获取父组件中传递的数据</p>
</li>
</ul>
<h2 id="memo">memo</h2>
<h2 id="usememo">useMemo</h2>
<h2 id="usecallback">useCallback</h2>
<p><a href="https://blog.csdn.net/fedlover/article/details/103347989?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&amp;depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control" target="_blank" rel="noopener noreffer">https://blog.csdn.net/fedlover/article/details/103347989?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control</a></p>
<p>记忆函数</p>
<h2 id="usereducer">useReducer</h2>
<p>和useContxt结合可以实现redux的效果，但是不建议使用，使用useDispatch和useSlelector来使用redux</p>
<h2 id="useref">useRef</h2>
<ul>
<li>相当于class中的createRef()</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span> <span class="p">,{</span><span class="nx">useRef</span><span class="p">}</span><span class="nx">from</span> <span class="s1">&#39;react&#39;</span>
<span class="kd">function</span> <span class="nx">Ref</span><span class="p">()</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="nx">textRef</span><span class="o">=</span> <span class="nx">useRef</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span>

  <span class="k">return</span><span class="p">(</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">textRef</span><span class="p">}/&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{()=&gt;{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">textRef</span><span class="p">.</span><span class="nx">current</span><span class="p">.</span><span class="nx">value</span><span class="p">)}}&gt;</span><span class="nx">点击</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
  <span class="p">)</span>
<span class="p">}</span>
<span class="kr">export</span> <span class="k">default</span> <span class="nx">Ref</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="usedispatch">useDispatch</h2>
<ul>
<li>
<p>用于结合redux使用</p>
</li>
<li>
<p>首先创建redux的store，action，reducer。并在外层容器包裹provider传递store</p>
</li>
<li>
<p>在需要使用dispatch发布action时</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span>
<span class="kr">import</span> <span class="p">{</span><span class="nx">useDispatch</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react-redux&#39;</span>
<span class="kr">import</span> <span class="p">{</span><span class="nx">createChangeColorAction</span><span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;./redux/action&#34;</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">ChangeColor</span><span class="p">()</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="nx">dispatch</span> <span class="o">=</span> <span class="nx">useDispatch</span><span class="p">()</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{()=&gt;{</span><span class="nx">dispatch</span><span class="p">(</span><span class="nx">createChangeColorAction</span><span class="p">(</span><span class="s1">&#39;red&#39;</span><span class="p">))}}&gt;</span><span class="nx">红色</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{()=&gt;{</span><span class="nx">dispatch</span><span class="p">(</span><span class="nx">createChangeColorAction</span><span class="p">(</span><span class="s1">&#39;blue&#39;</span><span class="p">))}}&gt;</span><span class="nx">蓝色</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
  <span class="p">)</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="k">default</span> <span class="nx">ChangeColor</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h2 id="useselector">useSelector</h2>
<ul>
<li>
<p>需要使用store中的state时</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span><span class="nx">createContext</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span>
<span class="kr">import</span> <span class="p">{</span><span class="nx">useSelector</span><span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;react-redux&#34;</span><span class="p">;</span>

<span class="kr">export</span> <span class="kr">const</span> <span class="nx">ColorContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">({})</span>
<span class="kr">export</span> <span class="kr">const</span> <span class="nx">Color</span> <span class="o">=</span> <span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">useSelector</span><span class="p">(</span><span class="nx">state</span><span class="p">=&gt;</span><span class="nx">state</span><span class="p">.</span><span class="nx">color</span><span class="p">)</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="p">&lt;</span><span class="nt">ColorContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{{</span><span class="nx">color</span><span class="p">}}&gt;</span>
      <span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">ColorContext.Provider</span><span class="p">&gt;</span>
  <span class="p">)</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h2 id="自定义hooks">自定义hooks</h2>
<ul>
<li>动态获取浏览器窗口大小的hooks</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,{</span><span class="nx">useState</span><span class="p">,</span><span class="nx">useEffect</span><span class="p">,</span><span class="nx">useCallback</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span>


<span class="kd">function</span> <span class="nx">useWinSize</span><span class="p">()</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="p">[</span><span class="nx">width</span><span class="p">,</span><span class="nx">setWidth</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">)</span>
  <span class="kr">const</span> <span class="p">[</span><span class="nx">height</span><span class="p">,</span><span class="nx">setHeight</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">)</span>

  <span class="kr">const</span> <span class="nx">reSize</span><span class="o">=</span><span class="nx">useCallback</span><span class="p">(()=&gt;</span> <span class="p">{</span>
    <span class="nx">setWidth</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">)</span>
    <span class="nx">setHeight</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">)</span>
  <span class="p">},[])</span>

  <span class="nx">useEffect</span><span class="p">(()=&gt;{</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;resize&#39;</span><span class="p">,</span><span class="nx">reSize</span><span class="p">)</span>
    <span class="k">return</span> <span class="p">()=&gt;{</span>
      <span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;resize&#39;</span><span class="p">,</span><span class="nx">reSize</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">},[])</span>

  <span class="k">return</span> <span class="p">({</span><span class="nx">width</span><span class="p">,</span><span class="nx">height</span><span class="p">})</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">UseWinSize</span><span class="p">()</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="p">{</span><span class="nx">width</span><span class="p">,</span><span class="nx">height</span><span class="p">}</span> <span class="o">=</span> <span class="nx">useWinSize</span><span class="p">()</span>
  <span class="k">return</span><span class="p">(</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;{</span><span class="nx">width</span><span class="p">}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;{</span><span class="nx">height</span><span class="p">}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  <span class="p">)</span>
<span class="p">}</span>

</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>useDebounce：修改value的更新频率</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useDebounce</span> <span class="o">=</span> <span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">delay</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="p">[</span><span class="nx">newValue</span><span class="p">,</span> <span class="nx">setNewValue</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span>
  <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="c1">//每次在value变化以后，设置一个定时器
</span><span class="c1"></span>    <span class="kr">const</span> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="nx">setNewValue</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span>
      <span class="p">},</span>
      <span class="mi">2000</span><span class="p">)</span>
    <span class="c1">//每次在上一个useEffect处理完以后再运行，第一个effect的timer被第二个effect清理，最后一个无人清理
</span><span class="c1"></span>    <span class="k">return</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
      <span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">},</span> <span class="p">[</span><span class="nx">value</span><span class="p">,</span> <span class="nx">delay</span><span class="p">])</span>
  <span class="k">return</span> <span class="nx">newValue</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>使用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"> <span class="kr">const</span> <span class="nx">debounceParam</span><span class="o">=</span> <span class="nx">useDebounce</span><span class="p">(</span><span class="nx">param</span><span class="p">,</span><span class="mi">1000</span><span class="p">)</span>
<span class="c1">//当用户输入关键词或选择select框，param变化
</span><span class="c1"></span>  <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">fetch</span><span class="p">(</span><span class="sb">`http://localhost:3000/projects?</span><span class="si">${</span><span class="nx">qs</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">cleanObject</span><span class="p">(</span><span class="nx">debounceParam</span><span class="p">))</span><span class="si">}</span><span class="sb">`</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kr">async</span> <span class="nx">response</span> <span class="p">=&gt;</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">setList</span><span class="p">(</span><span class="kr">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">())</span>
      <span class="p">}</span>
    <span class="p">})</span>
  <span class="p">},</span> <span class="p">[</span><span class="nx">debounceParam</span><span class="p">])</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
</div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-08-27</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"><span>
                            <a class="link-to-markdown" href="/posts/reacthooks/index.md" target="_blank">阅读原始文档</a>
                        </span></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="http://example.org/posts/reacthooks/" data-title="hooks" data-via="xxxx" data-hashtags="reactHooks"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="http://example.org/posts/reacthooks/" data-hashtag="reactHooks"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 WhatsApp" data-sharer="whatsapp" data-url="http://example.org/posts/reacthooks/" data-title="hooks" data-web><i class="fab fa-whatsapp fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="http://example.org/posts/reacthooks/" data-title="hooks"><i data-svg-src="/lib/simple-icons/icons/line.min.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="http://example.org/posts/reacthooks/" data-title="hooks"><i class="fab fa-weibo fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Myspace" data-sharer="myspace" data-url="http://example.org/posts/reacthooks/" data-title="hooks" data-description=""><i data-svg-src="/lib/simple-icons/icons/myspace.min.svg"></i></a><a href="javascript:void(0);" title="分享到 Blogger" data-sharer="blogger" data-url="http://example.org/posts/reacthooks/" data-title="hooks" data-description=""><i class="fab fa-blogger fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Evernote" data-sharer="evernote" data-url="http://example.org/posts/reacthooks/" data-title="hooks"><i class="fab fa-evernote fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/reacthooks/">reactHooks</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/react&#43;ts/" class="prev" rel="prev" title="react&#43;ts"><i class="fas fa-angle-left fa-fw"></i>react&#43;ts</a>
            <a href="/posts/react%E6%89%A9%E5%B1%95/" class="next" rel="next" title="react扩展">react扩展<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div id="comments"></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.89.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="https://github.com/yzuxqz" target="_blank">yzuxqz</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="/lib/katex/katex.min.css"><link rel="stylesheet" href="/lib/katex/copy-tex.min.css"><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript" src="/lib/katex/katex.min.js"></script><script type="text/javascript" src="/lib/katex/auto-render.min.js"></script><script type="text/javascript" src="/lib/katex/copy-tex.min.js"></script><script type="text/javascript" src="/lib/katex/mhchem.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"math":{"delimiters":[{"display":true,"left":"$$","right":"$$"},{"display":true,"left":"\\[","right":"\\]"},{"display":false,"left":"$","right":"$"},{"display":false,"left":"\\(","right":"\\)"}],"strict":false}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
